<template>
  <ScaleBox
    :width="1920"
    :height="1080"
    bgc="transparent"
    :delay="100"
    :isFlat="true"
  >
    <div class="content-wrap">
      <!-- 上 -->
      <div class="justify-align top-content-wrapper">
        <div class="left-justifying">
          <div class="title-top">
            {{ dateData.head_Txt }}
          </div>
          <div class="nav-box left-justifying">
            <div class="nav-item active-nav">
              {{ $t("navList.home") }}
            </div>
           <!-- <div class="nav-item" @click="goNext('http://192.168.3.18:8002/')">
              {{ $t("navList.dianbiao") }}
            </div>-->
            <div class="nav-item" @click="goNext('http://tpm.elite.com.kh:8200')">
              {{ $t("navList.tpm") }}
            </div>
            <div
              class="nav-item"
              @click="goNext('http://pdm.elite.com.kh:8849/login')">
              {{ $t("navList.pdm") }}
            </div>
            <!-- <div
              class="nav-item"
              @click="goNext('https://fasweb.tmi.com.vn/login')"
            >
              {{ $t("navList.FA") }}
            </div> -->
            <!-- <div
              class="nav-item">
              {{ $t("navList.dhp") }}
            </div> -->
            <!-- <div
              class="nav-item" @click="goNext('http://192.168.3.18:8009/login')">
              {{ $t("navList.pur") }}
            </div> -->
            <div
              class="nav-item" @click="goNext('https://visitor.tmi.com.vn/#/')">
              {{ $t("navList.visitor") }}
            </div>
          </div>
        </div>

        <div class="timers left-justifying">
          <div class="" style="margin-right: 20px; padding-bottom: 6px">
            <el-dropdown @command="changeLang" trigger="click">
              <img style="width: 30px" src="@/assets/img/en.png" alt="" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :disabled="locale === 'CN'" command="CN">
                    {{ $t("login.CN") }}
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="locale === 'EN'" command="EN">
                    {{ $t("login.EN") }}
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="locale === 'VN'" command="VN">
                    {{ $t("login.VN") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

          {{ dateData.dateYear }} {{ dateData.dateDay }}

          <!-- <div class="setting_icon"  @click="setSettingShow(true)">
                        <img src="@/assets/img/headers/setting.png" alt="设置">
                    </div> -->
        </div>
      </div>

      <!-- 上end -->

      <!-- 中间 -->
      <div class="center-content-wrapper justify-align">
        <div class="lf-box" style="width: 53%">
          <div class="lf-box-content">
            <div class="lf-title left-justifying">
              <img src="@/assets/img/new/title_icon.png" alt="" />
              <span @click="clickTitleTypeStatus" style="cursor: pointer;">{{ dateData.head_A_Txt }}</span>
            </div>
            <div class="wrapper-item">
              <div
                class="item-content"
                v-for="(item, index) in dateData.statusArr"
              >
                <div :class="getClassname(item.DColor)">
                  <div @click="clickDevices(item)" class="item-title1" v-if="item.DColor == 1">
                    {{ item.C2 }}
                  </div>
                  <div @click="clickDevices(item)" class="item-title2" v-else-if="item.DColor == 2">
                    {{ item.C2 }}
                  </div>
                  <div @click="clickDevices(item)" class="item-title3" v-else-if="item.DColor == 3">
                    {{ item.C2 }}
                  </div>
                  <div @click="clickDevices(item)" class="item-title" v-else>{{ item.C2 }}</div>
                  <div class="icon-box justify-align">
                    <div class="icon-item">
                      <img src="@/assets/img/new/icon1.png" alt="" />
                      <div>
                        {{ item.C4 }}
                      </div>
                    </div>
                    <div class="icon-item">
                      <img src="@/assets/img/new/icon2.png" alt="" />
                      <div>
                        {{ item.C3 }}
                      </div>
                    </div>
                    <div class="icon-item">
                      <img src="@/assets/img/new/icon33.png" alt="" />
                      <div>
                        {{ item.C1 }}
                      </div>
                    </div>
                  </div>
                  <div class="border"></div>
                  <div class="number-box">
                    <div class="number-item left-justifying">
                      <img
                        style="width: 22px"
                        src="@/assets/img/wd.png"
                        alt=""
                      />
                      <div class="label-txt">
                        {{ item.C6 }}
                      </div>
                      <!-- <div class="label-val">
                                                {{ item.C41 }}
                                            </div> -->
                    </div>
                    <div class="number-item left-justifying">
                      <img
                        style="width: 20px"
                        src="@/assets/img/yl.png"
                        alt=""
                      />
                      <div class="label-txt">
                        {{ item.C5 }}
                      </div>
                      <!-- <div class="label-val">
                                                {{ item.C2 }}
                                            </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rt-box" style="width: 46%">
          <div class="center-top-box">
            <div class="center-top-content">
              <div class="lf-title left-justifying" style="margin-bottom: 2px">
                <img src="@/assets/img/new/title_icon.png" alt="" />
                {{ dateData.head_B_Txt }}
              </div>
              <div class="total-box justify-align">
                <div class="total-item justify-align" style="width: 100%">
                  <div class="total-item-num">
                    <span>{{ dateData.productionData.C1 }}</span>
                  </div>
                  <div
                    class="total-item-num total-item-num2"
                    style="margin-left: 10px"
                  >
                    <span>{{ dateData.productionData.C2 }}</span>
                  </div>
                </div>
                <!-- <div class="total-item">
                                    {{dateData.productionData.C3}}
                                </div>
                                <div class="total-item">
                                    {{dateData.productionData.C4}}
                                </div>
                                <div class="total-item">
                                    {{dateData.productionData.C5}}
                                </div> -->
              </div>
            </div>
          </div>
          <div class="center-bottom-box" style="margin-top: 20px">
            <div class="center-top-content">
              <div class="lf-title left-justifying" style="margin-bottom: 2px">
                <img src="@/assets/img/new/title_icon.png" alt="" />
                {{ dateData.lineDataTileTwo }} 
              </div>
              <v-chart class="chart" :style="{ height: 336 + 'px' }" :option="optionPie"></v-chart>
              <!-- <lineItem
                :heightValue="336"
                :Title2Value="dateData.Title2Value"
                :Title1Value="dateData.Title1Value"
                :dateListLine="dateData.dateListLineTwo"
                :numListLine="dateData.numListLineTwo"
                :numListLineSec="dateData.numListLineSecTwo"
              ></lineItem> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 中间end -->

      <!-- 底部 -->
      <div
        class="bottom-content-wrapper center-content-wrapper justify-align"
        style="align-items: baseline"
      >
        <div class="bottom-item" style="width: 33%">
          <div class="bottom-item-content">
            <div class="lf-title left-justifying" style="margin-bottom: 2px">
              <img src="@/assets/img/new/title_icon.png" alt="" />
              {{ dateData.Head_C_Txt }}
            </div>
            <percentageItem></percentageItem>
          </div>
        </div>
        <div class="bottom-item" style="width: 33%">
          <div class="bottom-item-content">
            <div class="lf-title left-justifying">
              <img src="@/assets/img/new/title_icon.png" alt="" />{{
                dateData.lineDataTile
              }}
            </div>
            <lineItem
              :heightValue="241"
              :Title2Value="dateData.Title2ValueSec"
              :Title1Value="dateData.Title1ValueSec"
              :dateListLine="dateData.dateListLine"
              :numListLine="dateData.numListLine"
              :numListLineSec="dateData.numListLineSec"
            ></lineItem>
          </div>
        </div>
        <div class="bottom-item" style="width: 33%">
          <div class="bottom-item-content">
            <div class="lf-title left-justifying">
              <img src="@/assets/img/new/title_icon.png" alt="" />
              {{ state.titleTxt }}
            </div>
            <div class="justify-align table-head">
              <div class="row-item" style="width: 35%">
                {{ state.C1_Title }}
              </div>
              <div class="row-item" style="width: 30%">
                {{ state.C2_Title }}
              </div>
              <div class="row-item" style="width: 20%">
                {{ state.C3_Title }}
              </div>
              <div class="row-item" style="width: 15%; text-align: center">
                {{ state.C4_Title }}
              </div>
            </div>
            <ul class="left_boottom">
                <li class="left_boottom_item justify-align" v-for="(item, i) in state.rightBottomArray" :key="i"  @click="showDivItem(item)">
                    <div class="text-content" style="width: 35%;">{{ item.C1 }}</div>
                    <div class="text-content-types" style="width: 30%;"> {{ item.C2 }}</div>
                    <div class="text-time" style="width:20%;"> {{ item.T_Time }}</div>
                    <div class="text-staust" style="width: 15%;color: #73B0FF;"> {{ item.C3 }}</div>
                </li>
            </ul>
            <!-- <el-carousel
              height="200px"
              direction="vertical"
              :interval="6000"
              :autoplay="true"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(items, index) in state.rightBottomArray"
                :key="index"
              >
                <ul class="left_boottom">
                  <li
                    class="left_boottom_item justify-align"
                    v-for="(item, i) in items"
                    :key="i"
                    @click="showDivItem(item)"
                  >
                    <div class="text-content" style="width: 35%">
                      {{ item.C1 }}
                    </div>
                    <div class="text-content-types" style="width: 30%">
                      {{ item.C2 }}
                    </div>
                    <div class="text-time" style="width: 20%">
                      {{ item.T_Time }}
                    </div>
                    <div class="text-staust" style="width: 15%; color: #73b0ff">
                      {{ item.C3 }}
                    </div>
                  </li>
                </ul>
              </el-carousel-item>
            </el-carousel> -->
          </div>
        </div>
      </div>
      <!-- 底部end -->

      <!-- 弹框 -->
      <el-dialog
        v-model="dateData.dialogTableVisible"
        width="80%"
        style="background-color: #000"
      >
        <div>
          <div class="" style="margin-top: 20px">
            <div class="">
              <div class="lf-title left-justifying" style="margin-top: 10px;color: #fff;">
                <img src="@/assets/img/new/title_icon.png" alt="" />
                {{ dateData.lineDataDialogTitle }}
              </div>

              <!-- <lineItem :heightValue="500" :Title2Value="dateData.Title2ValueDialog" :Title1Value="dateData.Title1ValueDialog" :dateListLine="dateData.dateXListDialog" :numListLine="dateData.numListLineTemperature" :numListLineSec="dateData.numListLinePressure"></lineItem> -->
              <v-chart
                class="chart"
                :style="{ height: 500 + 'px' }"
                :option="optionLine"
                v-if="JSON.stringify(optionLine) != '{}'"
              />
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 弹框end -->
    </div>
  </ScaleBox>
</template>

<script setup lang="ts">
import ScaleBox from "vue3-scale-box";
import { graphic  } from "echarts/core";

import {
  leftTopData,
  MechanicDataTitle,
  getMechanicSummary,
  getMechanicDaysQty,
  getMechanicDaysQtySec,
  getMechanicScrollTxt,
  getMechanicDaysUuid,
  equipmentPostItemTitle,
  equipmentPostItemTypeStatus
} from "@/api/api";
import EmptyCom from "@/components/empty-com";
import dayjs from "dayjs";
import SeamlessScroll from "@/components/seamless-scroll";
import { computed, onMounted, reactive, onUnmounted, ref } from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import lineItem from "./lineItem.vue";
import lineItemOne from "./lineItemOne.vue";
import percentageItem from "./percentageItem.vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import Color from "element-plus/es/components/color-picker/src/utils/color";

const { locale } = useI18n();
console.log("locale==", locale);
// 切换中英文

const changeLang = (lang: string) => {
  locale.value = lang;
  localStorage.setItem("Language", lang); // 持久化，避免刷新页面后重置中英文
  getLeftTopData();
  getMechanicSummaryData();
  getMechanicDaysQtyData();
  getMechanicDaysQtyDataSec();
  getMechanicScrollTxtData();
};
console.log("Language==", localStorage.getItem("Language")); //CN，英文EN，越南VN
const router = useRouter();
const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 150,
    limitScrollNum: 4,
  },
  scroll: false,
  titleTxt: "",
  rightBottomArray: [],
  C1_Title: "",
  C2_Title: "",
  C3_Title: "",
  C4_Title: "",
});

const dateData = reactive<any>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null,
  statusArr: [],
  head_Txt: "",
  head_B_Txt: "",
  head_A_Txt: "",
  Head_C_Txt: "",
  productionData: "",
  numListLineSec: [],
  dateListLine: [],
  Title1Value: "",
  numListLine: [],
  lineDataTile: "",
  lineDataTileTwo: "",
  numListLineSecTwo: [],
  dateListLineTwo: [],
  Title2Value: "",
  Title1ValueSec: "",
  Title2ValueSec: "",
  numListLineTwo: [],
  Title1ValueDialog: "Temperature", //温度
  Title2ValueDialog: "Pressure", //压力
  dateXListDialog: [], //x 轴
  numListLineTemperature: [], //y 轴
  numListLinePressure: [], //y 轴
  lineDataDialogTitle: "",
  dialogTableVisible: false,
});

const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn();
const comName = computed(() => {
  if (indexConfig.value.leftBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});
const clickDevices= async (item: any)  =>{
  // console.log('clickDevices item',item)
  let ID = item.ID
  let res = await equipmentPostItemTitle(ID)
  //exec PROC_Ht_Dashboard '09',1,'en' 点击设备标题  1 等于接口的ID
  //exec PROC_Ht_Dashboard '10',1,'en'点击设备设备状态字样  1 等于接口的ID
}
const clickTitleTypeStatus= async ()  =>{
  let resTypeStatus = await equipmentPostItemTypeStatus(1)
  //exec PROC_Ht_Dashboard '09',1,'en' 点击设备标题  1 等于接口的ID
  //exec PROC_Ht_Dashboard '10',1,'en'点击设备设备状态字样  1 等于接口的ID
}
const goNext = (url: any) => {  
  // router.push(url)
  window.open(url, "_blank");
};
const showDivItem = (item: any) => {
  console.log(item);
  dateData.dialogTableVisible = true;
  getMechanicUuidData(item.UUID);
};

const getMechanicDaysQtyData = () => {
  getMechanicDaysQty().then((res) => {
    // lineDateData.MechanicData = res.data.data
    if (res.data.resultCode == "0") {
      let listData = res.data.data;
      dateData.lineDataTile = listData.length == 0 ? "-" : listData[0].Titel;
      let dateList = [];
      let numList = [];
      let numList2 = [];

      for (let i = 0; i < listData.length; i++) {
        dateList.push(listData[i].Label);
        numList.push(listData[i].Y1);
        numList2.push(listData[i].Y2);
      }

      dateData.dateListLine = dateList;
      dateData.numListLine = numList;
      dateData.numListLineSec = numList2;
      dateData.Title1ValueSec = listData.length == 0 ? "-" : listData[0].Title1;
      dateData.Title2ValueSec = listData.length == 0 ? "-" : listData[0].Title2;
    }
  });
};

const getMechanicDaysQtyDataSec = () => {
  getMechanicDaysQtySec().then((res) => {
    // lineDateData.MechanicData = res.data.data
    
    if (res.data.resultCode == "0") {
      let listData = res.data.data;
      let pieList = []
      let dataName = []
      for (let i = 0; i < listData.length; i++) {
        let obj = {value:listData[i].Y1,name: listData[i].Label+''}
        pieList.push(obj)
        dataName.push(listData[i].Label+'')
      }
      let titleTxt = listData.length == 0 ? "-" : listData[0].Titel;
      // let pieList = [
      // { value: listData[0].Y1, name: listData[0].Label+'' },
      // { value: listData[1].Y1, name: listData[1].Label+'' },
      // { value: listData[2].Y1, name: listData[2].Label+'' },
      // { value: listData[3].Y1, name: listData[3].Label+'' },
      // { value: listData[4].Y1, name: listData[4].Label+'' },
      // ]
      // let dataName = [listData[0].Label+'',listData[1].Label+'',listData[2].Label+'',listData[3].Label+'',listData[4].Label+'',listData[5].Label+'']
      setoptionPie(pieList,dataName,titleTxt)
      console.log('前五调信息',listData)
      dateData.lineDataTileTwo = listData.length == 0 ? "-" : listData[0].Titel;
      // let dateList = [];
      // let numList = [];
      // let numList2 = [];

      // for (let i = 0; i < listData.length; i++) {
      //   dateList.push(listData[i].Label);
      //   numList.push(listData[i].Y1);
      //   numList2.push(listData[i].Y2);
      // }

      // dateData.dateListLineTwo = dateList;
      // dateData.numListLineTwo = numList;
      // dateData.numListLineSecTwo = numList2;

      // dateData.Title1Value = listData.length == 0 ? "" : listData[0].Title1;
      // dateData.Title2Value = listData.length == 0 ? "" : listData[0].Title2;
      // console.log('listData=',dateData.Title2Value)
    }
  });
};
const getMechanicScrollTxtData = () => {
  // state.rightBottomArray = []
  getMechanicScrollTxt().then((res) => {
    let resObj = res.data.data;
    state.list = resObj;
    if (res.data.resultCode == "0" && resObj.length != 0) {
      state.titleTxt = resObj[0].Title;
      state.C1_Title = resObj[0].C1_Title;
      state.C2_Title = resObj[0].C2_Title;
      state.C3_Title = resObj[0].C3_Title;
      state.C4_Title = resObj[0].C4_Title;
      // let chunkedArray = state.list.reduce(
      //   (result: any, item: any, index: any) => {
      //     const chunkIndex = Math.floor(index / 5); // 每四个对象为一组
      //     if (!result[chunkIndex]) {
      //       result[chunkIndex] = []; // 初始化当前组
      //     }
      //     result[chunkIndex].push(item); // 将对象添加到当前组
      //     return result;
      //   },
      //   []
      // );
      state.rightBottomArray =resObj //chunkedArray;
      // console.log('----右下角列表',state.rightBottomArray)
    }
  });
};
const getMechanicSummaryData = () => {
  getMechanicSummary().then((res) => {
    // console.log('MechanicDataTitle==',res.data.data)
    let resObj = res.data.data[0];
    dateData.productionData = resObj;
  });
};
const getMechanicDataTitle = () => {
  MechanicDataTitle().then((res) => {
    // console.log('MechanicDataTitle==',res.data.data)
    let resObj = res.data.data[0];
    dateData.head_Txt = resObj.Head_Txt;
    dateData.head_A_Txt = resObj.Head_A_Txt;
    dateData.head_B_Txt = resObj.Head_B_Txt;
    dateData.Head_C_Txt = resObj.Head_C_Txt;
  });
};
const getLeftTopData = () => {
  leftTopData().then((res) => {
    // console.log('getLeftTopData==',res.data.data)
    let arr = res.data.data;
    // let indexToDelete = arr.length+1
    // arr.splice(indexToDelete, 1);
    dateData.statusArr = arr;
    // console.log('getLeftTopData==',dateData.statusArr)
  });
};
let timeInterval: any = null;
onMounted(() => {
  if (localStorage.getItem("Language") == null) {
    localStorage.setItem("Language", "EN"); // 持久化，避免刷新页面后重置中英文
  }
  getMechanicDataTitle();
  getLeftTopData();
  getMechanicSummaryData();
  getMechanicDaysQtyData();
  getMechanicDaysQtyDataSec();
  getMechanicScrollTxtData();


  timeInterval = setInterval(() => {
    // Todo...
    getLeftTopData();
    getMechanicSummaryData();
    getMechanicDaysQtyData();
    getMechanicDaysQtyDataSec();
    getMechanicScrollTxtData();
  }, 30000); // 每60秒发送一次请求
});
//在页面销毁之前先销毁定时器
onUnmounted(() => {
  clearTimeout(timeInterval);
  timeInterval = null;
});
const getClassname = (DColor: any) => {
  switch (DColor) {
    case 1:
      return "item-content-txt1";
    case 2:
      return "item-content-txt2";
    case 3:
      return "item-content-txt3";
    default:
      return "item-content-txt";
  }
};

const getMechanicUuidData = (uuid: any) => {
//   let uuids = "6159";
  let ID = "'"+ uuid +"'"
  getMechanicDaysUuid(ID).then((res) => {
    if (res.data.resultCode == "0") {
      let listData = res.data.data;
      //   Title1ValueDialog:'Temperature', //温度
      // Title2ValuedateXListDialog:'Pressure', //压力
      // dateXListDialog:[],//x 轴
      // numListLineTemperature:[],//y 轴
      // numListLinePressure:[],//y 轴

      dateData.lineDataDialogTitle = listData.length !=0?listData[0].Title:'-'
      let dateList = [];
      let numList = [];
      let numList2 = [];

      for (let i = 0; i < listData.length; i++) {
        dateList.push(listData[i].LogTime);
        numList.push(listData[i].Pressure);
        numList2.push(listData[i].Temperature);
      }
      // dateData.dateListLineTwo = dateList
      // dateData.numListLineTwo = numList
      // dateData.numListLineSecTwo = numList2

      dateData.dateXListDialog = dateList;
      dateData.numListLineTemperature = numList; //Pressure/压力
    //   dateData.numListLinePressure = numList2; //Temperature/温度
      dateData.Title1ValueDialog =
        listData.length == 0 ? "-" : "Pressure(压力)";
      dateData.Title2ValueDialog =
        listData.length == 0 ? "-" : "Temperature(温度)";

      console.log("dateXListDialog----=", dateData.dateXListDialog);
      console.log(
        "numListLineTemperature----=",
        dateData.numListLineTemperature
      );
      console.log("numListLinePressure----=", dateData.numListLinePressure);
      setOptionLine(
        dateData.dateXListDialog,
        dateData.numListLineTemperature,
        
      );
      console.log("listData----=", listData);
    }
  });
};

const optionPie = ref({});
const setoptionPie = (pieList:any,dataName:any,titleTxt:string) => {
  optionPie.value = {
    color: ["#34FFBF", "#0091FF", "#FF645D", "#FFDD1E","#7335FF"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
          orient: "vertical",
          position: 'right',
          right: '10%',
          top: '20%',
          data: dataName, //这里的渲染的数据需要与series里面渲染的数据中的name保持一致
          textStyle: {
            color: "rgba(255, 255, 255, 1)"
             
          }
      },
    series: [
      {
        name: titleTxt,
        type: "pie",
        // roseType: 'area',
        radius: "70%",
        center: ["40%", "50%"],
        data:pieList,
        // radius: [50, 130],
        itemStyle: {
          borderRadius: 8
        },
        label: {
              color:"#fff",
              show: true, // 显示标签
              formatter: '{c}片占比：{d}%'
          },
          emphasis: {
          itemStyle: {
            // borderRadius: 8
            // shadowBlur: 10,
            // shadowOffsetX: 0,
            // shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
    ],
  };
};
const optionLine = ref({});
const setOptionLine = async (xData: any[], yData: any[]) => {
  optionLine.value = {
    dataZoom: [
        // {
        //     height: 20, //时间滚动条的高度
        //     type: 'slider', //type的作用是指定数据缩放的类型，slider表示使用滑动条进行缩放，inside表示使用鼠标滚轮进行缩放。
        //     xAxisIndex: 0, //作用在x轴的下标（因为x轴可以有多个）
        //     filterMode: 'filter', //间滚动条的过滤模式,'filter'表示滑动时间条时会直接过滤掉不在时间范围内的数据，'weakFilter'表示滑动时间条时会逐渐过滤掉不在时间范围内的数据。
        //     start: 0,  //默认开始位置（百分比）
        //     end: 20,  //默认结束位置（百分比）
        // },
        // {
        //     type: 'inside',
        //     xAxisIndex: 0,
        //     filterMode: 'filter',
        //     start: 0,
        //     end: 20,
        // },
        // {
		// 		// orient: "vertical", //水平显示
		// 		show: true, //显示滚动条
		// 		height: 1,
		// 		bottom: 5,
		// 		startValue: 0, //起始值
		// 		endValue: 5, //结束值
		// 		showDetail: false
		// 	}

        ],
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.5)",
        },
      },
      axisLine: {
        // show:false,
        lineStyle: {
          color: "rgba(31,99,163,.5)",
        },
      },
      axisLabel: {
        color: "#68abfd",
        fontWeight: "500",
        // interval: 0, // 显示所有标签
        // rotate: 45, // X 轴标签文字旋转角度
        fontSize: 12,
        // formatter: function (value:any, index:number) {
        //       if (index >= 12) {
        //         return ''; // 超过12条数据的标签不显示
        //       } else {
        //         return value;
        //       }
        // }
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: true,
      left: "3%",
      right: "5%",
      bottom: "10px",
      top: "32px",
      containLabel: true,
      borderColor: "#1F63A3",
      // 启用 x 轴滚动条
    //   x2AxisIndex: 1,
    //   x2: {
    //     type: "category",
    //     data: xData,
    //     boundaryGap: false,
    //     show: false,
    //   },
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        // name: $t('lineItem.title1'),
        tooltip: {
          valueFormatter: function (value: any) {
            return dateData.Title1ValueDialog + "：" + value+'(MPa)'; //return titleName1.value+'：'+value
          },
        },
        color: "rgba(252,144,16,.7)",
        areaStyle: {
          //右，下，左，上
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(252,144,16,.7)",
              },
              {
                offset: 1,
                color: "rgba(252,144,16,.0)",
              },
            ],
            false
          ),
        },
      },
    //   {
    //     data: yData2,
    //     type: "line",
    //     smooth: true,
    //     symbol: "none", //去除点
    //     // name: "Item 2",
    //     tooltip: {
    //       valueFormatter: function (value: any) {
    //         return dateData.Title2ValueDialog + "：" + value;
    //       },
    //       textStyle: {
    //         align: "right", // 文字左对齐
    //       },
    //     },
    //     color: "rgba(9,202,243,.7)",
    //     areaStyle: {
    //       //右，下，左，上
    //       color: new graphic.LinearGradient(
    //         0,
    //         0,
    //         0,
    //         1,
    //         [
    //           {
    //             offset: 0,
    //             color: "rgba(9,202,243,.7)",
    //           },
    //           {
    //             offset: 1,
    //             color: "rgba(9,202,243,.0)",
    //           },
    //         ],
    //         false
    //       ),
    //     },
    //     markPoint: {
    //       data: [],
    //     },
    //   },
    ],
  };
};
</script>

<style scoped lang="scss">
.justify-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-justifying {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.timers {
  color: #fff;
  padding-right: 20px;
}
.content-wrap {
  width: 100%;
  height: 100%;
  //   padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/new/bg_img.png");
  background-size: cover;
  background-position: center center;
}

.top-content-wrapper {
  padding: 20px;
  color: #fff;

  .title-top {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 2px;
  }

  .nav-box {
    margin-left: 120px;

    .nav-item {
      background: linear-gradient(180deg, #182b43 0%, #415d80 100%);
      padding: 10px 30px;
      margin-left: 10px;
      cursor: pointer;
    }
    .active-nav {
      background: linear-gradient(
        180deg,
        rgb(71, 131, 204) 0%,
        rgb(45, 99, 167) 13.92%,
        rgb(84, 134, 199) 80.91%,
        rgb(63 114 180) 100%
      );
    }
  }
}
.lf-title {
  font-size: 18px;
}
.center-content-wrapper {
  color: #fff;
  padding: 10px 30px;
  .lf-box {
    width: 100%;
    height: 100%;
    //   padding: 16px 16px 16px 16px;
    box-sizing: border-box;
    background-image: url("@/assets/img/new/type_bg.png");
    background-size: 100% 100%;
    // background-position: center center;
    .lf-box-content {
      padding: 30px;

      .wrapper-item {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        height: 515px;
        overflow: auto;
        .item-content {
          width: 20%; /* 每个div占据一行的 20% 宽度 */
          box-sizing: border-box;
          .item-content-txt {
            background: rgba(46, 64, 89, 0.6);
            margin: 5px;
          }
        }
        .border {
          height: 1px;
          background-color: #344763;
          width: 80%;
          margin: 5px auto;
          opacity: 0.2;
        }
        .item-content-txt1 {
          background: rgba(141, 141, 141, 0.5);
          margin: 5px;
        }
        .item-content-txt2 {
          background: rgba(41, 214, 70, 0.3);
          margin: 5px;
        }
        .item-content-txt3 {
          background: rgba(245, 113, 113, 0.4);
          margin: 5px;
        }
        .item-title {
          padding: 10px;
          background-color: #2c4b74;cursor: pointer;
        }
        //绿色：#29D646  红色：#E61C1C  蓝色：#2C4B74
        .item-title1 {
          //0就是默认，1灰色 2绿色 3红色
          background-color: #8d8d8d;
          padding: 10px;cursor: pointer;
        }
        .item-title2 {
          //0就是默认，1灰色 2绿色3红色
          background-color: #29d646;
          padding: 10px;cursor: pointer;
        }
        .item-title3 {
          //0就是默认，1灰色 2绿色 3红色
          background-color: #e61c1c;
          padding: 10px;cursor: pointer;
        }
        .icon-box {
          padding: 20px 10px;
          text-align: center;
          color: #ffffff;
          .icon-item {
            text-align: center;
            img {
              display: block;
              margin: 0 auto 10px;
            }
          }
        }
        .number-box {
          padding: 10px;
          .number-item {
            padding: 5px 0;
            color: #ffffff;
            .label-val {
              color: #34e3af;
              font-weight: bold;
            }
          }
        }
      }
      /* 设置滚动条宽度为10px */
      .wrapper-item::-webkit-scrollbar {
        width: 5px;
      }

      /* 设置滚动条的颜色和样式 */
      .wrapper-item::-webkit-scrollbar-thumb {
        background-color: #384a64;
        border-radius: 5px;
      }

      .wrapper-item::-webkit-scrollbar-thumb:hover {
        background-color: #29384e;
      }
    }
  }
}
.center-top-box {
  width: 100%;
  height: 100%;
  //   padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/new/ni_bg.png");
  background-size: 100% 100%;
  .center-top-content {
    padding: 20px;
    .total-box {
      padding: 10px;
      font-size: 22px;
      .total-item-num {
        width: 50%;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        background: rgba(52, 227, 175, 0.16);
        padding: 15px 20px;
        margin-bottom: 10px;

        border: 1px solid rgba(52, 227, 175, 0.4);

        span {
          font-size: 24px;
          font-weight: 700;
          color: #fff;
        }
      }
      .total-item-num2 {
        background: rgba(255, 141, 26, 0.16);

        border: 1px solid rgba(255, 141, 26, 0.4);
      }
    }
  }
}
.center-bottom-box {
  width: 100%;
  height: 100%;
  //   padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/new/ni2_bg.png");
  background-size: 100% 100%;
  .center-top-content {
    padding: 20px;
  }
}
.bottom-content-wrapper {
  .bottom-item {
    width: 100%;
    height: 100%;
    //   padding: 16px 16px 16px 16px;
    box-sizing: border-box;
    background-image: url("@/assets/img/new/type_bg.png");
    background-size: 100% 100%;
    .bottom-item-content {
      padding: 20px;
      font-size: 14px;
      color: #c1cede;
      .table-head {
        padding: 10px;
      }
      
      .left_boottom_item {
        padding: 10px 10px;
        color: #ffffff;
        cursor: pointer;
        .text-staust {
          text-align: center;
        }
      }
    }
  }
}
.left_boottom {
         height: 200px;overflow-y: auto;
      }
      /* 设置滚动条宽度为10px */
      .left_boottom::-webkit-scrollbar {
        width: 5px;
      }

      /* 设置滚动条的颜色和样式 */
      .left_boottom::-webkit-scrollbar-thumb {
        background-color: #384a64;
        border-radius: 5px;
      }

      .left_boottom::-webkit-scrollbar-thumb:hover {
        background-color: #29384e;
      }
.left_boottom li:nth-child(odd) {
  background-color: rgba(177, 200, 230, 0.06);
}
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  overflow: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}
.chart-container {
  width: 100%;
  height: 500px;
  position: relative;
  overflow-x: auto; /* 添加水平滚动条 */
  margin-bottom: 20px;
}

:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.3); /* 黑色背景，透明度为0.5 */
}
:deep(.el-overlay-dialog) {
    background-color: rgba(0, 0, 0, 0.3); /* 黑色背景，透明度为0.5 */
 
}
</style>
